import { h, render } from "vue";
import XtxMessage from "./message.vue";
type params = {
  type: 'success' | 'error' | 'warning',
  text: string,
  duration?: number
}

// 创建一个div，并设置class，然后将其添加到body中
const div = document.createElement('div')
// 给 div  设置 class
div.setAttribute('class', 'xtx-message-container')
// 将 div 添加到 body
document.body.appendChild(div)
let timer = -1
// 定义Message函数，用于显示消息提示
const Message = ({ type, text, duration = 2000 }: params) => {
  // 生成虚拟dom 
  // 第一个参数：标签名或组件。
  // 第二个参数：属性对象（可选）。
  // 第三个参数：子节点数组（可选）。
  const vNode = h(XtxMessage, { type, text })
  // 将虚拟 DOM (VNode) 渲染到指定的容器中
  render(vNode, div)
  // 清除定时器
  clearTimeout(timer)
  // 添加定时器，duration秒后移除组件
  timer = setTimeout(() => {
    render(null, div)
  }, duration)
}

// 定义Message.success方法，用于显示成功消息提示
Message.success = (text: string, duration?: number) => {
  Message({ type: 'success', text, duration })
}

// 定义Message.error方法，用于显示错误消息提示
Message.error = (text: string, duration?: number) => {
  Message({ type: 'error', text, duration })
}

// 定义Message.warning方法，用于显示警告消息提示
Message.warning = (text: string, duration?: number) => {
  Message({ type: 'warning', text, duration })
}
export default Message
